import React, { Component } from 'react';
import { Button } from 'antd-mobile';
import styles from './TeamList.module.less';
import { getTeams } from '../../store/teamStore';
import { withRouterNavigate } from '../../utils/routerHocs';

class TeamList extends Component {
  state = {
    teams: [],
  };

  componentDidMount() {
    const teams = getTeams();
    this.setState({ teams });
  }

  handleAdd = () => {
    this.props.navigate('/teamDetail');
  };

  handleItemClick = (id) => {
    this.props.navigate(`/teamDetail/${id}`);
  };

  render() {
    const { teams } = this.state;

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <div className={styles.title}>球队列表</div>
          <Button color="primary" size="small" onClick={this.handleAdd} className={styles.addBtn}>
            新增
          </Button>
        </div>

        <div className={styles.list}>
          {teams.map((t) => (
            <div key={t.id} className={styles.item} onClick={() => this.handleItemClick(t.id)}>
              <div className={styles.itemLeft}>
                <div className={styles.id}>ID: {t.id}</div>
                <div className={styles.name}>{t.name}</div>
              </div>
              <div>›</div>
            </div>
          ))}
          {teams.length === 0 && <div className="text-center text-muted">暂无数据</div>}
        </div>
      </div>
    );
  }
}

export default withRouterNavigate(TeamList);


